<template>
<div class="topic">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
  <!-- <p>刷新次数: {{ count }}</p> -->

    <ul>
        <li v-for="item in dataArr" :key="item.id">
            <!-- <img :src="item.scene_pic_url" alt=""> -->
            <img v-lazy="item.scene_pic_url" alt="">
            <h4>{{item.title}}</h4>
            <p>{{item.subtitle|sliceTitle2}}</p>
            <span>{{item.price_info|formatMoney}}</span>
        </li>
    </ul>
    <van-pagination v-model="page" :page-count="pageCount"   mode="simple" @change="changePage" />
    </van-pull-refresh>
</div>
</template>

<script>
import { Toast } from 'vant';
import {getTopicData} from '@/utils/http'
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: 'Topic',
data() {
return {
    page:1,
    size:10,
    dataArr:[],
    pageCount:0,
    count: 0,
    isLoading: false,
    Toast:''
}
},
props:[''],
components: {

},
methods: {
    changePage(){
        console.log(this.page);
        this.getData()
    },
    getData(){
        getTopicData({
        page:this.page,
        size:this.size
    }).then(res=>{
        console.log(res);
        this.dataArr = res.data.data
        this.pageCount = res.data.totalPages
        // 翻页时回到顶部
        document.documentElement.scrollTop=0
    }).catch(e=>{console.log(e);})
    },
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
},
created() {
    this.getData()
},
}
</script>

<style lang='less' scoped>
.topic{
    font-size: 16px;
    text-align: center;
    padding-bottom: 40px;
    ul{
        padding-bottom: 20px;
        li{
            img{
                width: 100%;
                display: block;
                margin-bottom: 10px;
            }
            h4{
                height: 35px;
                line-height: 35px;
                font-size: 20px;
                font-weight: bolder;
            }
            p{
                height: 35px;
                line-height: 35px;
            }
            span{
                height: 35px;
                line-height: 35px;
                display: block;
                margin-bottom: 15px;
                color: rgb(155, 9, 9);
            }
        }
    }
    /deep/.van-pagination__page-desc{
        display: none;
    }
}
</style>